<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>1F钢架E化方案 - 后台管理 - 用户列表</title>
  <%@include file="/WEB-INF/common/css.jsp"%>
  
  <%@include file="/WEB-INF/common/topjs.jsp"%>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  
  <%@include file="/WEB-INF/common/admin/header.jsp"%>
  <%@include file="/WEB-INF/common/admin/menu.jsp"%>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
    	<h3 class="layui-bg-cyan" style="height: 50px;line-height: 50px;padding-left: 5px">职工列表</h3>
		<hr>
		<div>
			<form class="layui-form" action="" lay-filter="serachForm">
			  <div class="layui-form-item layui-inline">
			    <label class="layui-form-label">姓名/工号</label>
			    <div class="layui-input-block">
			      <input type="text" name="search" id="search" placeholder="输入姓名/工号" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item layui-inline">
			    <label class="layui-form-label">部门</label>
			    <div class="layui-input-block">
			      <select name="department" id="department">
			        
			      </select>
			    </div>
			  </div>
			
			  <div class="layui-form-item layui-inline">
			    <div class="layui-input-block">
			      <button class="layui-btn" lay-submit lay-filter="searchBtn"><i class="layui-icon layui-icon-search"></i>搜索</button>
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
			  </div>
			</form>
			
			<table  class="layui-table"  id="listshow">
				<thead>
				    <tr>
				      <th>ID</th>
				      <th>部门</th>
				      <th>工号</th>
				      <th>姓名</th>
				      <th>创建时间</th>
				      <th>最后修改时间</th>
				      <th>操作</th>
				    </tr> 
				</thead>
			</table>
			<div id="pager"></div>
		</div>
    </div>
  </div>
  
  <%@include file="/WEB-INF/common/admin/footer.jsp"%>
  
</div>
<%@include file="/WEB-INF/common/bottomjs.jsp"%>
<script>
	$(function(){
		initView();
		showData(page, size);
	})
	function initView(){
		$.ajax({
			url:"${base}/admin/department/list.api",
	    	type: "post",
	    	headers: Apicheck.getHeaders(),
	    	data: {page: 1,size: 200},
	    	success: function(result){
	    		$("#department").html("<option value=''></option>");
	    		for(var i = 0; i < result.data.length; i ++){
	    			var op = '<option value="'+result.data[i].id+'">'+result.data[i].name+'</option>';
	    			$("#department").append(op);
	    		}
	    		layui.form.render("select", "serachForm");
	    		layui.form.on("submit(searchBtn)", function(data){
	    			console.log(data.field);
	    			department = data.field.department;
	    			search = data.field.search;
	    			showData();
	    			return false;
	    		})
	    	}
		});
	}
	var page = 1, size = 10, department = 0, search = "";
	function showData(){
		$("#listshow tbody").html("");
		$.ajax({
			url:"${base}/api/user/list.api",
	    	type: "post",
	    	headers: Apicheck.getHeaders(),
	    	data: {page: page,size: size, department: department, search:search},
	    	success: function(result){
	    		var xtable = new XTable();
	    		xtable.setOption({
	    			type: XTable.NORMAL,
	    			showKey:["user.id", "department.name", "user.no", "user.username", "user.createTime", "user.updateTime"],
	    			buttons:[{
	    				class: "layui-btn",
	    				style: "",
	    				name: "编辑",
	    				click: function(e){
	    					var formContent = '工号: <input type="text" id="updateno" class="layui-input" value="'+e.user.no+'">';
	    					formContent += '<br>用户名: <input type="text" id="updateusername" class="layui-input" value="'+e.user.username+'">';
	    					layer.open({
    						   title: '职工编辑'
    						   ,content: formContent
    						   ,yes: function(index, layero){
    							   $.ajax({
    							    	url:"${base}/api/user/update",
    							    	type: "post",
    							    	data: {id: e.user.id, no: $("#updateno").val(), username: $("#updateusername").val()},
    							    	success: function(result){
    							    		if(result.code == 1001){
    							    			//layer.msg(result.msg, {icon:6});
    							    			location.reload();
    							    		}else{
    							    			layer.msg(result.msg, {icon:5,anim:6});
    							    		}
    							    	}
    							    });
    						   }
    						});
	    				}
	    			},{
	    				name: "权限",
	    				class: "layui-btn layui-btn-normal",
	    				click: function(e){
	    					location.href = "${base}/admin/user/roleList.html?id=" + e.user.id;
	    				}
	    			}, {
	    				class: "layui-btn layui-btn-danger",
	    				style: "",
	    				name: "删除",
	    				click: function(e){
	    					layer.open({
    						   title: '部门删除'
    						   ,content: '真要删吗?，千万别手残咯'
    						   ,yes: function(index, layero){
    							   $.ajax({
    							    	url:"${base}/api/user/delete.api",
    							    	type: "post",
    							    	headers: Apicheck.getHeaders(),
    							    	data: {id: e.user.id},
    							    	success: function(result){
    							    		if(result.code == 1001){
    							    			//layer.msg(result.msg, {icon:6});
    							    			location.reload();
    							    		}else{
    							    			layer.msg(result.msg, {icon:5,anim:6});
    							    		}
    							    	}
    							    });
    						   }
    						});
	    				}
	    			}],
	    			data: result.data.list
	    		});
	    		xtable.show("listshow");
	    		//显示分页
	    		var laypage = layui.laypage;
	    		laypage.render({
	    		    elem: $('#pager'),
	    		    curr: result.data.pager.pageNumber,
	    		    limit: 10,
	    		    count: result.data.pager.recordCount, //数据总数，从服务端得到
	    		    jump: function(obj, first){
	    		        //obj包含了当前分页的所有参数，比如：
	    		        if(!first){
	    		        	page = obj.curr;
	    		        	size = obj.limit;
	    		        	showData();
	    		        }
	    		    }
	    		});
	    	}
		});
	}
</script>
</body>
</html>